<template>
  <scroll-view class="wuc-tab" :class="{tabClass,'hasFixed':hasFixedFlag}" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft">
    <div v-if="!textFlex">
      <div class="wuc-tab-item" :class="[index === tabIndex ? selectClass + ' cur':'']" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
			<span class="tabName">{{item.name}}</span>
			<text class="lineTxt"></text>
      </div>
    </div>

    <div class="flex text-center" v-if="textFlex">
      <div class="wuc-tab-item flex-sub" :class="index === tabIndex ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
        <text :class="item.icon"></text>
        <span>{{item.name}}</span>
      </div>
    </div>
  </scroll-view>
</template>
<script>
export default {
    name: 'wuc-tab',
    data() {
        return {};
    },
    props: {
		currSys:{//common sqSys
			type:String,
			default:'common'
		},
        tabList: {
            type: Array,
            default() {
                return [];
            }
        },
        tabIndex: {
            type: Number,
            default() {
                return 0;
            }
        },
        tabClass: {
            type: String,
            default() {
                return '';
            }
        },
        tabStyle: {
            type: String,
            default() {
                return '';
            }
        },
        textFlex: {
            type: Boolean,
            default() {
                return false;
            }
        },
        selectClass: {
            type: String,
            default() {
                return 'text-blue';
            }
        },
		hasFixedFlag:{
			type:Boolean,
			default:false
		}
    },
    methods: {
        tabSelect(index, e) {
            if (this.currentTab === index) return false;
            this.$emit('update:tabIndex', index);
            this.$emit('change', index);
        }
    },
    computed: {
        scrollLeft() {
            return (this.tabIndex - 1) * 60;
        }
    }
};
</script>
<style lang="scss" scoped>
div,
scroll-view,
swiper {
	box-sizing: border-box;
}
.wuc-tab {
    white-space: nowrap;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 0 30rpx;
	&.hasFixed{
		position: fixed;
		/* #ifdef APP-PLUS */
		top: calc(var(--status-bar-height));
		/* #endif */
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		left: 0;
		background: #fff;
		z-index: 11;
	}
}
.wuc-tab-item {
    display: inline-block;
	@include respTo(phone){
		height: 90upx;
		line-height: 90upx;
	}
	@include respTo(pad){
		height: 60rpx;
		line-height: 60rpx;
	}
    margin: 0 10upx;
    padding: 0 20upx;
	position: relative;
	
}
.lineTxt{
	width: 30%;
	position: absolute;
	left: 36%;
	@include respTo(phone){
		height: 10rpx;
		bottom: 10rpx;
	}
	@include respTo(pad){
		height: 6rpx;
		bottom: 8rpx;
	}
	background: #ffa60e;
	border-radius: 20rpx;
	display: none;
	
}
.wuc-tab-item.cur .lineTxt{
	display: block;
}
.tabName{
	color: #8e8985;
	@include respTo(phone){
		font-size: $font-size28; 
	}
	@include respTo(pad){
		font-size:$padSize16; 
	}
}
.wuc-tab-item.cur .tabName{
	color: #38332f;
	font-weight: bold;
	@include respTo(phone){
		font-size: $font-size32; 
	}
	@include respTo(pad){
		font-size:$padSize20; 
	}
}
.flex {
    display: flex;
}
.text-center {
    text-align: center;
}
.flex-sub {
    flex: 1;
}
/* .text-blue{
  color:#ffa60e;
} */
.text-white{
  color:#ffffff;
}
.bg-white{
    background-color: #ffffff;
}
.bg-blue{
    background-color: #0081ff;
}
.text-orange{
  color: #f37b1d
}
::-webkit-scrollbar{
	width: 0;
	height: 0;
	color: transparent;
}
</style>
